<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色聊天应用 - 钢铁侠 & 黑寡妇</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1 class="app-title">角色聊天应用 - 钢铁侠 & 黑寡妇</h1>
    
    <div class="container">
        <!-- 角色选择面板 -->
        <div class="panel characters-panel">
            <div class="character-card active" data-id="1">
                <img src="https://images.unsplash.com/photo-1635805737707-575885ab0820?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Iron Man" class="character-image">
                <div class="character-name">钢铁侠</div>
                <div class="character-description">Tony Stark，天才亿万富翁花花公子慈善家</div>
            </div>
            
            <div class="character-card" data-id="2">
                <img src="https://images.unsplash.com/photo-1635805737707-575885ab0820?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Black Widow" class="character-image">
                <div class="character-name">黑寡妇</div>
                <div class="character-description">Natasha Romanoff，精英间谍和复仇者</div>
            </div>
        </div>
        
        <!-- 聊天面板 -->
        <div class="panel chat-panel">
            <div class="chat-header">
                <h2>与 <span id="current-character">钢铁侠</span> 对话</h2>
            </div>
            
            <div class="chat-messages" id="chat-messages">
                <div class="message character-message">
                    <div class="message-sender">钢铁侠</div>
                    <div class="message-content">你好！我是托尼·斯塔克，很高兴和你聊天。今天想聊点什么？</div>
                </div>
            </div>
            
            <div class="chat-input-container">
                <input type="text" class="chat-input" id="message-input" placeholder="输入你的消息...">
                <button class="send-button" id="send-button">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- 配置面板 -->
        <div class="panel config-panel">
            <div class="config-section">
                <h3>AI 配置</h3>
                <label class="config-label">AI 提供商</label>
                <select class="select-input" id="ai-provider">
                    <option value="mock">模拟模式</option>
                    <option value="openai">OpenAI</option>
                    <option value="free_ai">免费AI</option>
                </select>
                
                <div class="api-key-container" id="api-key-container">
                    <label class="config-label" style="margin-top: 15px;">OpenAI API Key</label>
                    <input type="text" class="text-input" id="api-key" placeholder="输入你的API密钥">
                </div>
                
                <div class="fallback-checkbox">
                    <label class="checkbox-label">
                        <input type="checkbox" id="use-fallback" checked>
                        <span>失败时使用模拟回退</span>
                    </label>
                </div>
            </div>
            
            <div class="config-section">
                <h3>角色技能</h3>
                <div class="skills-container" id="skills-container">
                    <!-- 技能按钮将通过JavaScript动态生成 -->
                </div>
            </div>
            
            <div class="config-section">
                <h3>连接状态</h3>
                <div id="connection-status" style="color: #4cd964;">● 已连接</div>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript模块 -->
    <script src="js/utils.js"></script>
    <script src="js/characters.js"></script>
    <script src="js/chat.js"></script>
    <script src="js/config.js"></script>
    <script src="js/app.js"></script>
</body>
</html>